<template>
    <section class="circle-box">
    <Header style="z-index:1025">
        <header-menu></header-menu>
    </Header>
        <top-search :navlist="NavTitle"></top-search>
        <user-nav :list="listTitle"></user-nav>
        <div class="swiper">
            <Carousel autoplay loop>
                <CarouselItem>
                    <div class="carousel">
                        <img src="../../assets/banner.png" alt="">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <img src="../../assets/banner.png" alt="">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <img src="../../assets/banner.png" alt="">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <img src="../../assets/banner.png" alt="">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <img src="../../assets/banner.png" alt="">
                    </div>
                </CarouselItem>
            </Carousel>
        </div>
        <cricle-top></cricle-top>
        <div class="container">
            <div class="circle-left">
                <diary-column :width="900"></diary-column>
                <cricle-content :list="list"></cricle-content>
            </div>
            <div class="circle-right">
                <cricle-search></cricle-search>
                <cricle-nav></cricle-nav>
                <side-list :list="sidelist"></side-list>
                <list-posts :postslist="postslist"></list-posts>
            </div>
        <div style="clear: both"></div>
        </div>

    <bottom-icon></bottom-icon>
    <Footer>
        <page-footer></page-footer>
    </Footer>
        </section>
</template>

<script>
    import HeaderMenu from '../../components/Header/'
    import PageFooter from '../../components/Footer/'
    import BottomIcon from '../../components/BottomIcon/'
    import CricleTop from '../../components/Circle/Cricle-top'
    import diaryColumn from '../../components/DiaryColumn/'
    import CricleContent from '../../components/Circle/CricleContent'
    import CricleSearch from '../../components/Circle/CricleSearch'
    import CricleNav from '../../components/Circle/CricleNav'
    import SideList from "../../components/SideMenu/SideList"
    import ListPosts from "@/components/ListItem/ListPosts"
    import userNav from '../../components/Usertop/userNav'
    import TopSearch from '../../components/TopSearch/'
    export default {
        name: "index",
        components: {
            PageFooter,
            BottomIcon,
            HeaderMenu,
            CricleTop,
            diaryColumn,
            CricleContent,
            CricleSearch,
            CricleNav,
            SideList,
            ListPosts,
            userNav,
            TopSearch
        },
        data () {
            return {
                NavTitle:{
                    id:1,
                    name:'圈子',
                    title:'越泡越美  越美越泡',
                    type:5
                },
                list: [

                    {id: 1, top:1,text:'【 竞价置顶热点广告专区】北京八大处整形医院，瘦身吸脂进口设备，将于2018年2月16日正式投入使用，凡是在该日期之前预约的用户,价格可享受6折优惠，另外还可以在双眼皮埋线手术、开眼内角手术中，任选一个免费项目，更有机会子2000万抽奖活动中获得大奖！这是同行业中第一次推出高额回馈的返利活动，敬请您的光临！  咨询电话：40080066999',time:'2018-08-29 15:30:00',syes:1545,zan:1645,imgNum:1235,type:1},
                    {id: 2, top:1,text:'【 竞价置顶热点广告专区 】北京八大处整形医院，瘦身吸脂进口设备，将于2018年2月16日正式投入使用，凡是在该日期之前预约的用户,价格可享受6折优惠，另外还可以在双眼皮埋线手术、开眼内角手术中，任选一个免费项目，更有机会子2000万抽奖活动中获得大奖！这是同行业中第一次推出高额回馈的返利活动，敬请您的光临！  咨询电话：40080066999',time:'2018-08-29 15:30:00',syes:1545,zan:1645,imgNum:1235,type:1},
                    {id: 3, top:1,text:'【竞价置顶热点广告专区】北京八大处整形医院，瘦身吸脂进口设备，将于2018年2月16日正式投入使用，凡是在该日期之前预约的用户,价格可享受6折优惠，另外还可以在双眼皮埋线手术、开眼内角手术中，任选一个免费项目，更有机会子2000万抽奖活动中获得大奖！这是同行业中第一次推出高额回馈的返利活动，敬请您的光临！  咨询电话：40080066999',time:'2018-08-29 15:30:00',syes:1545,zan:1645,imgNum:1235,type:1},
                    {id: 4, top:1,text:'【竞价置顶热点广告专区】北京八大处整形医院，瘦身吸脂进口设备，将于2018年2月16日正式投入使用，凡是在该日期之前预约的用户,价格可享受6折优惠，另外还可以在双眼皮埋线手术、开眼内角手术中，任选一个免费项目，更有机会子2000万抽奖活动中获得大奖！这是同行业中第一次推出高额回馈的返利活动，敬请您的光临！  咨询电话：40080066999',time:'2018-08-29 15:30:00',syes:1545,zan:1645,imgNum:1235,type:1},
                    {id: 5, top:1,text:'【竞价置顶热点广告专区 】北京八大处整形医院，瘦身吸脂进口设备，将于2018年2月16日正式投入使用，凡是在该日期之前预约的用户,价格可享受6折优惠，另外还可以在双眼皮埋线手术、开眼内角手术中，任选一个免费项目，更有机会子2000万抽奖活动中获得大奖！这是同行业中第一次推出高额回馈的返利活动，敬请您的光临！  咨询电话：40080066999',time:'2018-08-29 15:30:00',syes:1545,zan:1645,imgNum:1235,type:1},
                    {id: 6, top:1,text:'【竞价置顶热点广告专区】北京八大处整形医院，瘦身吸脂进口设备，将于2018年2月16日正式投入使用，凡是在该日期之前预约的用户,价格可享受6折优惠，另外还可以在双眼皮埋线手术、开眼内角手术中，任选一个免费项目，更有机会子2000万抽奖活动中获得大奖！这是同行业中第一次推出高额回馈的返利活动，敬请您的光临！  咨询电话：40080066999',time:'2018-08-29 15:30:00',syes:1545,zan:1645,imgNum:1235,type:1},
                    {id: 7, top:2,text:'【竞价置顶热点广告专区】北京八大处整形医院，瘦身吸脂进口设备，将于2018年2月16日正式投入使用，凡是在该日期之前预约的用户,价格可享受6折优惠，另外还可以在双眼皮埋线手术、开眼内角手术中，任选一个免费项目，更有机会子2000万抽奖活动中获得大奖！这是同行业中第一次推出高额回馈的返利活动，敬请您的光临！  咨询电话：40080066999',time:'2018-08-29 15:30:00',syes:1545,zan:1645,imgNum:1235,type:1,
                        userImg:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                      img:[
                          'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                          'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                          'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                          'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                          'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                          'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                          'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                          'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                      ]
                    },
                    {id: 8, top:2,text:'【竞价置顶热点广告专区】北京八大处整形医院，瘦身吸脂进口设备，将于2018年2月16日正式投入使用，凡是在该日期之前预约的用户,价格可享受6折优惠，另外还可以在双眼皮埋线手术、开眼内角手术中，任选一个免费项目，更有机会子2000万抽奖活动中获得大奖！这是同行业中第一次推出高额回馈的返利活动，敬请您的光临！  咨询电话：40080066999',time:'2018-08-29 15:30:00',syes:1545,zan:1645,imgNum:1235,type:1,
                        userImg:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                        img:[
                            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                        ]
                    },

                ],
                sidelist: [
                    {
                        id: 1,
                        name: '竞价排名',
                        child: [
                            {id: 1,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 2,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 3,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 4,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 2,
                        name: '大家正在预约',
                        child: [
                            {id: 21,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 3,
                        name: '新品推荐',
                        child: [
                            {id: 21,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 4,
                        name: '相关推荐',
                        relevant:1,
                        child: [
                            {id: 21,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                ],
                postslist: [
                    {
                        id: 1,
                        name: '浏览最多的帖子',
                        child: [
                            {id: 1,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...'},
                            {id: 2,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',},
                            {id: 3,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',},
                        ]
                    },
                    {
                        id: 2,
                        name: '回复最多的帖子',
                        child: [
                            {id: 1,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',},
                            {id: 2,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',},
                            {id: 3,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',},
                        ]
                    },
                ],
                listTitle: [
                    {id:1,name:"广场",show:false,path:'/circle',
                        child: {id:4,name:"帖子详情",show:false,path:'/circledelist',
                            child: {id:4,name:"报名人数",show:false,path:''},
                        },
                    },
                    {id:2,name:"活动",show:true,path:'/activity',
                        child: {id:4,name:"活动详情",show:false,path:'/activitydelists',
                            child: {id:4,name:"报名人数",show:false,path:'/activityregistration'},
                        },
                    },
                    {id:3,name:"专题",show:false,path:'/special',
                        child: {id:4,name:"活动详情",show:false,path:'/specialdelist',
                            child: {id:4,name:"报名人数",show:false,path:''},
                        },
                    },
                    {
                        id: 4, name: "达人", show: false, path: '/aman',
                        child: {id: 4, name: "达人详情", show: false, path: '/amandelists',
                            child: {id:4,name:"报名人数",show:false,path:''},
                        }
                    }
                ],
            }
        }
    }
</script>

<style scoped lang="less">
   .swiper{
       height: 375px;
       img{
           width: 1917px;
           height: 375px;
       }
   }
    .circle-left{
        width: 900px;
        float: left;
    }
    .circle-right{
        float: right;
        width: 260px;
    }
</style>